<template>
<v-toolbar card >
    <v-flex xs2>
        <v-menu
            class="pr-2"
            ref="startDate"
            lazy
            :close-on-content-click="false"
            transition="scale-transition"
            offset-y
            full-width
            :nudge-bottom="-22"
            max-width="290px"
            :return-value.sync="startDate"
        >
            <v-text-field
            slot="activator"
            placeholder="开始日期"
            v-model="startDate"
            prepend-icon="event"
            readonly
            ></v-text-field>
            <v-date-picker v-model="startDate" locale="zh-cn" no-title scrollable  @input="$refs.startDate.save(startDate);startDateMenu = false">
            </v-date-picker>
        </v-menu>
    </v-flex>
    <v-flex xs2 >
        <v-menu
            ref="endDate"
            lazy
            class="pr-2"
            :close-on-content-click="false"
            transition="scale-transition"
            offset-y
            full-width
            :nudge-bottom="-22"
            min-width="290px"
            :return-value.sync="endDate"
        >
            <v-text-field
            slot="activator"
            placeholder="结束日期"
            v-model="endDate"
            prepend-icon="event"
            readonly
            ></v-text-field>
            <v-date-picker v-model="endDate"  locale="zh-cn" no-title scrollable @input="$refs.endDate.save(endDate);endDateMenu = false"></v-date-picker>
        </v-menu>
    </v-flex>
    <v-flex xs3 :style="{minWidth:'105px'}">

            <v-btn icon>
            <v-icon>search</v-icon>
            </v-btn>
            <v-tooltip bottom>
                <v-btn 
                fab
                slot="activator"
                small
                icon
                >
                    <v-icon>get_app</v-icon>
                </v-btn>
                <span>导出</span>
            </v-tooltip> 
            <v-tooltip bottom>
                <v-btn 
                fab
                slot="activator"
                small
                icon
                >
                    <v-icon>backup</v-icon>
                </v-btn>
                <span>导入</span>
            </v-tooltip> 
            <v-tooltip bottom>
                <v-btn 
                fab
                slot="activator"
                small
                icon
                @click="addBranch"
                >
                    <v-icon>add</v-icon>
                </v-btn>
                <span>新增</span>
            </v-tooltip>           
            <v-tooltip bottom>
                <v-btn 
                fab
                slot="activator"
                small
                icon
                >
                    <v-icon>extension</v-icon>
                </v-btn>
                <span>分布</span>
            </v-tooltip>  
            <v-tooltip bottom>
                <v-btn 
                fab
                slot="activator"
                small
                icon
                >
                    <v-icon>swap_horiz</v-icon>
                </v-btn>
                <span>切换</span>
            </v-tooltip> 
    </v-flex>
    <v-flex xs3>
    </v-flex>
    <v-flex xs3>
        <v-text-field
        append-icon="search"
        placeholder="输入消费者姓名、卡主手机号"
        v-model="search"
        ></v-text-field>
    </v-flex>
<!-- <Add-branch :dialogBranch = "dialogBranch"></Add-branch> -->
</v-toolbar>
</template>

<script>
//import AddBranch from "./AddBranch.vue"
export default {
    props: ["startDate","endDate","search"],
    data() {
        return {
            dialogBranch:false
        };
    },
    mounted () {
        //localStorage.setItem(num, JSON.stringify(todos))
        PubSub.subscribe('cancelBranch', (msg, index) => {
            this.addBranch()
        })
    },
    components: {
        //AddBranch
    },
    methods: {
        addBranch(){
            this.dialogBranch = !this.dialogBranch
        }
    }
};
</script>

<style>
</style>
